<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>

<body>
    <div class="utmost">
        <div class="head">
            <br>
            <h1>登录</h1>
            <br>
            <div class="layui-form-item">
                <label class="layui-form-label">输入框</label>
                <div class="layui-input-block">
                    <input type="text" name="title" required lay-verify="required" placeholder="请输入标题"
                        autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">密码框</label>
                <div class="layui-input-inline">
                    <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                        autocomplete="off" class="layui-input pwd" value="1" style="background: rgba(223, 219, 219, 0.2);">

                    <!-- <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" 
                        autocomplete="off" class="layui-input pwd"> -->
                </div>
            </div>
            <div class="layui-form-item">
                <label for="authCode2" class="layui-form-label">验证码</label>
                <!-- <input type="text" class="sradd phonekey" id="authCode2" placeholder="请输入收到的验证码" /> -->
                <input type="text" name="title" required lay-verify="required" placeholder="请输入验证码" autocomplete="off"
                    class="layui-input  Verification">
                <img src="" class="error" alt="">
            </div>

            <br>
            <button class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal" id="Sign">登录</button>

        </div>



    </div>
</body>
<script>

    var key = ''
        res = []
    $(function () {
        //刷新
        Refresh()

        $('#Sign').click(function () {
            $.ajax({
                type: 'post',
                url: 'https://api.zzgoodqc.cn/api/login',
                dataType: 'json',
                data: {
                    "username": $('.layui-input').val(),
                    "password": $('.pwd').val(),
                    "captcha": $('.Verification').val(),
                    "key": key
                },
                success: function (res) {
                    if (res.code == 200) {
                        alert(res.message)
                        console.log(res);
                        var token = res.data.token

                        res = JSON.parse(localStorage.getItem('res'))
                        res = ( {
                    "username": $('.layui-input').val(),
                    "password": $('.pwd').val(),
                    "captcha": $('.Verification').val(),
                    "toubu": token
                })
                        localStorage.setItem('res', JSON.stringify(res))
                        window.location.href = './首页.html'
                    } else {
                        alert('登陆失败')
                    }
                }
            })
        })
    })



    //验证码
    function Refresh() {
        $.ajax({
            type: 'get',
            url: 'https://api.zzgoodqc.cn/api/captcha',
            dataType: 'json',
            success: function (res) {
                console.log(res);
                $('.error').attr("src", res.data.img),
                    key = res.data.key
            }
        })
    }

    $('.error').click(Refresh)
</script>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    /* .utmost {
        width: 100%;
        height: 100%;
        min-width: 1000px;
        background-image: url("http://pic.bizhi360.com/bpic/73/10673.jpg");
        background-size: 100% 100%;
        background-position: center center;
        overflow: auto;
        background-repeat: no-repeat;
        position: fixed;
        line-height: 100%;
        padding-top: 150px;
    } */

    .utmost {
        width: 100%;
        height: 797px;
        /* background-color: #FF7F50; */
        background: url('http://pic.bizhi360.com/bpic/2/10602.jpg');
        background-size: 100% 100%;
        overflow: hidden;
    }

    .head {
        width: 25rem;
        height: 25rem;
        /* background: url('http://pic.bizhi360.com/bpic/73/10673.jpg') no-repeat;
        background-size: 100% 100%; */
        background: rgba(223, 219, 219, 0.6);
        text-align: center;
        margin: auto;
        margin-top: 10%;
    }

    h1 {
        color: #000;
    }

    .layui-form-label {
        width: 2.625rem;
        color: #000;

    }

    .layui-input-block {
        margin-right: 48px;
    }

    .layui-input-inline {
        margin-left: 38.4px;
    }

    .layui-input {
        width: 12.5rem;
        background: rgba(223, 219, 219, 0.2);
    }

    .pwd {
        width: 12.5rem;
        /* background: rgba(223, 219, 219, 0.2); */
    }

    .Verification {
        width: 6.25rem;
        margin-left: 112px;
    }

    .layui-form-item {
        position: relative;
    }

    .error {
        position: absolute;
        top: 0px;
        left: 216px;
        width: 5.625rem;
        height: 36.8px;
        background-color: orange;
        text-align: center;
        line-height: 36.8px;
    }

    .layui-btn {
        background: rgba(225, 255, 255, 05.5rem);
    }
</style>

</html>